<template>
  <!-- 挂账支付 -->
  <div class="jeecg-basic-table jeecg-basic-table-form-container">
    <a-form @keyup.enter.native="searchQuery">
      <a-row :gutter="8" type="flex">
        <a-col flex="115px">
          <a-form-item label="状态" :label-col="{ style: { width: '40px' } }" :wrapper-col="{ span: 17 }">
            <a-select
              v-model:value="queryParam.stat"
              @change="statSelect"
              class="w80"
              placeholder="全部"
              :showArrow="false"
              :allowClear="true"
              :disabled:="true"
            >
              <a-select-option value="0">未审</a-select-option>
              <a-select-option value="1">已审</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>

        <a-col flex="115px">
          <a-form-item label="方式" :label-col="{ style: { width: '40px' } }" :wrapper-col="{ span: 17 }">
            <a-select v-model:value="queryParam.sffs" class="w80" placeholder="全部" :showArrow="false" :allowClear="false">
              <a-select-option value="1">转账</a-select-option>
              <a-select-option value="3">挂账</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>

        <a-col flex="350px">
          <a-form-item label="合并时间" :label-col="{ style: { width: '70px' } }" :wrapper-col="{ style: { width: '270px' } }">
            <a-date-picker
              v-model:value="queryParam.spsjBegin"
              :disabled-date="disabledStartDate"
              :disabled="begDateDisabled"
              valueFormat="YYYY-MM-DD"
              placeholder=""
              style="width: 123px"
            />
            ~
            <a-date-picker
              v-model:value="queryParam.spsjEnd"
              :disabled-date="disabledEndDate"
              :disabled="begDateDisabled"
              valueFormat="YYYY-MM-DD"
              placeholder=""
              style="width: 123px"
            />
          </a-form-item>
        </a-col>

        <a-col flex="202px">
          <a-form-item label="对方户名" :label-col="{ style: { width: '70px' } }" :wrapper-col="{ span: 17 }">
            <a-input placeholder="" v-model:value="queryParam.dfhm"></a-input>
          </a-form-item>
        </a-col>

        <a-col flex="auto" style="float: right; width: 180px">
          <span style="float: right; overflow: hidden" class="table-page-search-submitButtons">
            <a-button type="primary" color="success" @click="searchQuery" preIcon="ant-design:search">查询</a-button>
            <a-button type="default" color="error" @click="searchMerge" preIcon="ant-design:coffee-outlined" style="margin-left: 8px">合并</a-button>
          </span>
        </a-col>
      </a-row>
    </a-form>
  </div>

  <!-- table区域-begin -->
  <BasicTable @register="registerTable" :onRowDbClick="handleDblclick" :onRowClick="handleClick" :rowClassName="rowClassName">
    <template #operation="{ text, record }">
      <a-badge :color="statusColor(text, record)" :text="operateTim(text, record)" />
    </template>
  </BasicTable>
  <!-- table区域-end -->

  <!-- 表单区域
  <AccountFlowBatchInterval @register="registerAccountFlowInterval" @success="reload"></AccountFlowBatchInterval> 
  <AccountFlowBatchPaymentList @register="registerAccountFlowBatchPayment" @success="reload"></AccountFlowBatchPaymentList> -->
</template>

<script lang="ts" setup name="AccountFlowBatchPaymerge">
  import { ref, computed, unref, reactive, toRaw } from 'vue';
  import { BasicTable, TableAction, ActionItem, BasicColumn } from '/@/components/Table';
  import { useModal } from '/@/components/Modal';
  import { useListPage } from '/@/hooks/system/useListPage';
  import { render } from '/@/utils/common/renderUtils';
  import { paymergeList } from '/@/views/full/account/types/accountBatch.api';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useUserStore } from '/@/store/modules/user';

  import moment from 'dayjs';
  import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
  import AccountFlowBatchInterval from './modules/AccountFlowBatchInterval.vue';
  import AccountFlowBatchPaymentList from './modules/AccountFlowBatchPaymentList.vue';

  //初始化 -------------------------------------------------------------
  const { createMessage: $message } = useMessage();
  const userStore = useUserStore();

  //定义查询表单，查询条件
  const queryParam = reactive({
    ddlxIds: '',
    stat: '', //未审
    sffs: '1',
    dfhm: '',
    spsjBegin: '',
    spsjEnd: '',
  });

  /* 日期参数 */
  function disabledStartDate(beginDate) {
    const endDate = queryParam.spsjEnd;
    if (!beginDate || !endDate) {
      return false;
    }
    return beginDate.valueOf() > moment(endDate).valueOf();
  }

  function disabledEndDate(endDate) {
    const beginDate = queryParam.spsjBegin;
    if (!endDate || !beginDate) {
      return false;
    }
    return moment(beginDate).valueOf() > endDate.valueOf();
  }

  //转账支付，审核状态为经理时，默认查询日期是； 其它状态
  let begDateDisabled = ref(true);
  let endDateDisabled = ref(true);
  function statSelect(data) {
    console.info('statSelect@@@', data);
    if (data == '2' || data == '') {
      queryParam.spsjBegin = '';
      queryParam.spsjEnd = '';
      begDateDisabled.value = true;
      endDateDisabled.value = true;
    } else {
      var today = moment().format('YYYY-MM-DD');
      queryParam.spsjBegin = today;
      queryParam.spsjEnd = today;
      begDateDisabled.value = false;
      endDateDisabled.value = false;
    }
  }

  //订单列表
  const statusFmt = ({ text }: { text: any }) => {
    if (!text) {
      return;
    }
    const color = text == '0' ? 'red' : text == '1' ? 'green' : 'blue';
    return render.renderTag(render.renderDict(text, 'accountStat'), color);
  };

  //操作人 2经理，3已审，9回退
  const statusColor = (text, record) => {
    let color = '';
    if (record.stat == '0') {
      color = 'green';
    } else if (record.stat == '1') {
      color = 'magenta';
      text = record.shsj;
    }

    if (!text) {
      color = '';
    }
    return color;
  };

  //操作时间
  const operateTim = (text, record) => {
    if (record.stat == '2') {
      text = record.shsj;
    } else if (record.stat == '3' || record.stat == '9') {
      text = record.spsj || record.shsj;
    }
    if (!text) {
      return '';
    } else {
      return moment(text).format('YYYY-MM-DD HH:mm');
    }
  };

  const operator = ({ text, record }) => {
    if (record.stat == '2') {
      text = record.shrName;
    } else if (record.stat == '3' || record.stat == '9') {
      text = record.sprName || record.shrName;
    }
    if (!text) {
      return '';
    } else {
      return text;
    }
  };

  //订单列表 - 表头
  const columns: BasicColumn[] = [
    { title: '状态', align: 'center', dataIndex: 'stat', width: 50, customRender: statusFmt },
    { title: '支付方式', align: 'left', dataIndex: 'sffs', width: 50 },
    { title: '对方账号', align: 'left', dataIndex: 'dfzh', width: 160 },
    { title: '支出金额', align: 'right', dataIndex: 'fkje', width: 80, className: 'text-green-500' },
    { title: '备注', align: 'left', dataIndex: 'bz', width: 180 },
    { title: '审核人', align: 'center', dataIndex: 'shrName', width: 55 },
    { title: '审核日期', align: 'center', dataIndex: 'shsj', width: 70, format: 'date|YYYY-MM-DD' },
    { title: '操作人', align: 'center', dataIndex: 'createName', width: 55, customRender: operator },
    { title: '操作日期', align: 'center', dataIndex: 'createTime', width: 110, slots: { customRender: 'operation' } },
  ];

  //初始化 -------------------------------------------------------------

  function searchQuery() {
    setProps({ searchInfo: toRaw(queryParam) });
    reload();
  }

  function searchMerge() {
    openAccountFlowBatchPayment(true);
  }

  function handleSummary(tableData: Recordable[]) {
    const res = getRawDataSource();
    if (res) {
      return getRawDataSource().summary;
    } else {
      return [];
    }
  }

  // 列表页面公共参数、方法
  const { prefixCls, tableContext } = useListPage({
    designScope: 'accountBatch-paymergeMerge',
    tableProps: {
      api: paymergeList,
      columns: columns,
      showTableSetting: false,
      showIndexColumn: false, //行号
      clickToRowSelect: true, //点击选择
      showActionColumn: false,
      useSearchForm: false,
      showSummary: true,
      resizeHeightOffset: 30,
      summaryFunc: handleSummary,
      beforeFetch: (params) => Object.assign(params, unref(queryParam)),
    },
  });

  //注册table数据
  //const [registerTable, { reload, setProps, getRawDataSource, setSelectedRowKeys, redoHeight }, { rowSelection, selectedRowKeys, selectedRows }] = tableContext;
  //注册table数据
  const [registerTable, {reload, setProps, getRawDataSource}] = tableContext
  //详细订单
  const [registerAccountFlowInterval, { openModal: openAccountFlowInterval }] = useModal();

  //双击行
  function handleDblclick(record) {
    //openBusinessOrder(true, record.id);
    var params = Object.assign({}, queryParam);
    params['id'] = record.id;
    params['type'] = 'takePayment';
    openAccountFlowInterval(true, params);
  }

  //合并支付
  const [registerAccountFlowBatchPayment, { openModal: openAccountFlowBatchPayment }] = useModal();

  //单击行
  let selectRows = reactive<any>({id: '', username: ''});
  function handleClick(record) {
    selectRows.id = record.id
    selectRows.username = record.username
  }

  function rowClassName(record, index) {
    return record.id === selectRows.id ? 'row-selected' : '';
  }

</script>
<style scoped></style>
